﻿@{
    ViewBag.Title = ViewBag.Quadro.Nome;
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style type="text/css">

    body {
	    margin:0;
	    padding:0;
        padding-top: 45px;
        padding-bottom: 40px;	    
    }

    #board {	    
        width:100%;
	    clear:both;
	    float:left;
	    position:relative;
        font-family:Arial;
	    font-size:85%;	
        line-height:18px;
    }

    .status {
	    float:left;
	    position:relative;
        min-height:600px;        
        overflow:visible;
    }

    textarea {
        resize:none;
    }

    .borda {
        background:#fff url(@Url.Content("~/Images/dot-silver.gif")) repeat-y top left;
    }

    #tools {
	    clear:both;
	    text-align:center;
	    width: 100%;
	    height: 70px;
	    background-color:#fff;
	    z-index:2000;
    }

    #tools img {
	    margin:0 20px;
    }

    #tools img:hover {
	    top:-5px;
    }

    h2 {
	    padding: 5px;
	    margin:0;
	    text-align:center;
        font-size:160%;
    }

    .postit {
	    z-index:700;
	    width:110px;
	    height:110px;
	    float:left;	
	    margin:0px;
	    padding:15px;
	    overflow:hidden;
        line-height:18px;
    }   

    .tipo1 {
        background: transparent url(@Url.Content("~/Images/nota-amarela.png")) no-repeat scroll top center;
    }

    .tipo2 {
        background: transparent url(@Url.Content("~/Images/nota-rosa.png")) no-repeat scroll top center;
    }

    .tipo3 {
        background: transparent url(@Url.Content("~/Images/nota-azul.png")) no-repeat scroll top center;
    }

    .tipo4 {
        background: transparent url(@Url.Content("~/Images/nota-verde.png")) no-repeat scroll top center;
    }

    .fechar {
        position:absolute;
        left:123px;
        top:1px;
        display:none;
    }

    .edit {
        width:110px;
        height:110px;
        display:none;
        background-color:transparent;
        overflow:auto;
        font-family:Arial;
	    font-size:100%;	
        margin:0;
        padding:0;
    }

    .view {
        width:110px;
        height:93px;
        display:block;
        background-color:transparent;
        overflow:hidden;
        font-family:Arial;
	    font-size:100%;	
        margin:0;
        padding:0;
        word-wrap: break-word;
    }

    .tooltip {
        word-wrap: break-word;
    }

    .responsavel:before {
        content: ' ';
    }

</style>

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">                            
            <span class="brand" style="color:#fff">Kanban:@ViewBag.Quadro.Nome</span>    
            <ul class="nav pull-right">                    
                <li>
                    <img src="@Url.Content("~/Images/ajax-loader.gif")" style="margin-top:2px; display:none" id="loading" /> 
                </li>       
            </ul>                     
        </div>
    </div>
</div>


<div id="board">    

    @foreach(Kanban.Entity.QuadroColuna coluna in ViewBag.Quadro.Colunas){
                    
        <div class="status @(coluna.Ordem != 1 ? "borda" : "")" id="status_@coluna.Ordem" data-status="@coluna.Ordem" style="width: @(100 / ViewBag.Quadro.Colunas.Count)%">
            @if (coluna.Ordem == 1){  
                <a href="#novaTarefa" style="margin:3px" class="btn btn-success" data-toggle="modal" data-target="#novaTarefa"> <i class="icon-plus icon-white"></i> Task </a>
                <h2 style="margin-top:-40px">@coluna.Nome <span class="total"></span></h2>
            }else{
                <h2>@coluna.Nome <span class="total"></span></h2>   
            }
                
        
        </div>
        
    }   

</div>


<div id="novaTarefa" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="novaTarefaLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="novaTarefaLabel">Add task</h3>
  </div>
  <div class="modal-body">
    <div class="row-fluid">
    
        <div id="erroNovaTarefa" class="alert alert-error" style="display:none"></div>
    

        <label class="span4" style="margin:0;padding:0">Description</label>    
        <textarea autofocus="autofocus" class="span8" id="novaTarefaDescricao" style="height:100px;"></textarea>
        

        
            <label class="span4" style="margin:0;padding:0">Color</label>                                                                                                                           
            <select class="span5" id="novaTarefaCor">
                <option value="1" selected="selected">Yellow</option>
                <option value="2">Pink</option>
                <option value="3">Blue</option>
                <option value="4">Green</option>
            </select>


    </div>      
  </div>
  <div class="modal-footer">
      <label class="pull-left checkbox"><input type="checkbox" id="keepNewTaskOpened" /> Keep this window opened after adding a task</label>
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
    <button class="btn btn-primary" id="newTask">Add</button>
  </div>
</div>

@section scripts{
 <script src="~/Scripts/jquery.signalR-1.1.3.min.js"></script>
 <script src="~/signalr/hubs"></script>
<script type="text/javascript">
    $(function () {
        var usuario = 1;
        var quadro = '@ViewBag.Quadro.Chave';

        //---------------------------------------------------
        // SIGNALR
        //--------------------------------------------------
        // definição do hub
        var tarefasHub = $.connection.updatesHub;

        // declaração dos métodos que serão chamados no cliente
        tarefasHub.client.adicionar = function (tarefa) {
            AdicionarTarefa(tarefa, true);
        };

        tarefasHub.client.excluir = function (tarefa) {
            ExcluirTarefa(tarefa);
        };

        tarefasHub.client.mover = function (tarefa) {
            MoverTarefa(tarefa);
        };

        tarefasHub.client.editar = function (tarefa) {
            Editar(tarefa);
        };       

        function Iniciar() {             

            tarefasHub.server.entrar(quadro);

            var req = $.ajax({
                url: '@Url.Action("GetTasks")',
                type: 'GET',
                dataType: 'json',
                cache: false,
                contentType: "application/json;charset=utf-8"
            });

            req.done(function (json) {

                if(json != null)
                {
                    for (var i = 0; i < json.length; i++) {
                        AdicionarTarefa(json[i], false);                   
                    }
                }

                AtivarDrag();
                AtivarDrop();
                AtualizarAltura();
                AtivarFerramentas();
                AtualizarContagem();
                Loading();
            });

            req.fail(function (jqXHR, textStatus, errorThrown) {

                var resultado = $.parseJSON(jqXHR.responseText);
                alert('Não foi possível carregas as tarefas, ocorreu um erro: ' + resultado["ExceptionMessage"]);
                Loading();
            });


        }

        function MontarQuadro(json){
            var botao = '<a href="#novaTarefa" style="margin:3px" class="btn btn-success" data-toggle="modal" data-target="#novaTarefa"> <i class="icon-plus icon-white"></i> Tarefa </a>';            
            var div = '';

            if(json.Colunas != null){
                for(var i = 0; i < json.Colunas.length; i++){
                    if(i == 0){
                        div = ' <div id="done" data-status="'+ json.Colunas[i].Id +'" style="margin-top:-40px">' + botao + '<h2>' + json.Colunas[i].Nome + ' <span class="total"></span></h2></div>';
                    }else{
                        div = ' <div id="done" data-status="'+ json.Colunas[i].Id +'"><h2>' + json.Colunas[i].Nome + ' <span class="total"></span></h2></div>';
                    }
                    $('#board').append(div);
                }
            }

        }

        function Loading(){
            $('#loading').toggle();
        }

        function AtualizarContagem(){
            $('span.total').each(function(i, item){
                var total = $(item).parent().parent().find('.postit').length;
                $(item).text('(' + total + ')');
            });
        }

        function MontarTarefa(tarefa) {

            if(tarefa.Excluido)
                return '';

            var html = '<div class="postit tipo'+ tarefa.Tipo +'" data-status="'+ tarefa.Status +'" data-idTarefa="' + tarefa.Id + '"><img class="fechar" src="@Url.Content("~/Images/Close-icon.png")" style="width:16px;height:16px" /><span class="descricao"><span class="view"><span title="'+ tarefa.Descricao.replace(/\"/g, '&quot;') +'">' + tarefa.Descricao + '</span></span><textarea class="edit">' + tarefa.Descricao + '</textarea></span>';

            // o id 1 é igual a sem responsável
            if (tarefa.Responsavel == null || tarefa.Responsavel.Id == 0) {
                html += '<span class="responsavel"></span>';
            } else {
                html += '<span class="responsavel"> @@' + tarefa.Responsavel.Nome + '</span>';
            }

            return html;
        }      

        //-------------------------------------------------------------------
        // Possibilita que os post-its sejam arrastados
        //-------------------------------------------------------------------
        function AtivarDrag() {
            $('.postit').draggable({ zIndex: 99999, containment: 'board', cursor: "move", cursorAt: { top: 50, left: 50 } });
        };

        //-------------------------------------------------------------------
        // Possibilita que as colunas e ferramentas recebam os post-its 
        // arrastados
        //-------------------------------------------------------------------
        function AtivarDrop() {

            $('#trash').droppable({
                accept: ".postit",
                drop: function (event, ui) {
                    if (confirm('A tarefa "' + $(ui.draggable).find('.descricao').text() + '" será excluída, continuar?')) {
                        $(ui.draggable).remove();
                    } else {
                        $(ui.draggable).css('top', '0');
                        $(ui.draggable).css('left', '0');
                    }
                }
            });

            $('.status').droppable({
                drop: function (event, ui) {
                    Mover(this, ui.draggable);
                }
            });          

            $('#folder').droppable({
                accept: ".postit",
                drop: function (event, ui) {
                    if (confirm('A tarefa "' + $(ui.draggable).text() + '" será arquivada, continuar?')) {
                        $(ui.draggable).remove();
                    } else {
                        $(ui.draggable).css('top', '0');
                        $(ui.draggable).css('left', '0');
                    }
                }
            });

            $('#tools').droppable({
                accept: ".postit",
                drop: function (event, ui) {
                    $(ui.draggable).css('top', '0');
                    $(ui.draggable).css('left', '0');
                }
            });

            $('#board').droppable({
                accept: ".postit",
                drop: function (event, ui) {
                    $(ui.draggable).css('top', '0');
                    $(ui.draggable).css('left', '0');
                }
            });
        };


        function AtivarTooltip(){
            $('span.view span').tooltip('destroy');
            $('.status:first span.view span').tooltip({ placement: 'right', container: 'body', delay: { show: 700, hide: 100 } });
            $('span.view span').tooltip({placement: 'left', container: 'body', delay: { show: 700, hide: 100 }});            
        }

        //-------------------------------------------------------------------
        // Ativa a barra de ferramentas
        //-------------------------------------------------------------------
        function AtivarFerramentas() {

            $('#board').click(function(){
                $(this).find('.fechar').hide(); 
                $(this).find('.edit').hide(); 
                $(this).find('.view').show(); 
                $(this).find('.responsavel').show(); 
            });

            AtivarTooltip();

            $('.modal').on('shown', function(){
                $(this).find('[autofocus]:first').focus();
            });

            // Grava as alterações no postit após pressionar a tecla ENTER
            $('#board').on("keypress", "textarea.edit", function(e){                
                
                if (e.keyCode == 13 && !e.shiftKey)
                {                    
                    var postit = $(this).parent().parent();              
                    //alert('Implementar gravação no banco de dados.');
                    var textoAtualizado = $(postit).find('.edit').val();
                    
                    var idTarefa = $(postit).attr('data-idTarefa');
                    //var idResponsavel = $(postit).attr('data-idResponsavel');                    

                    Loading();

                    var req = $.ajax({
                        url: '@Url.Action("UpdateTask")',
                        type: 'PUT',
                        dataType: 'json',
                        contentType: "application/json;charset=utf-8",
                        cache: false,
                        data: JSON.stringify({ Id: idTarefa, Descricao: textoAtualizado})
                    });

                    req.done(function (json) {
                        //chamada do método de sincronização do SIGNALR
                        tarefasHub.server.editar(json, quadro);   
                        Editar(json);
                        Loading();
                    });

                    req.fail(function (jqXHR, textStatus, errorThrown) {
                        var resultado = $.parseJSON(jqXHR.responseText);
                        alert('Não foi possível atualizar a tarefa, ocorreu um erro: ' + resultado["ExceptionMessage"]);
                        Loading();
                    });
                    

                    $(postit).find('.view span').text(textoAtualizado); 
                    $(postit).find('.view span').attr('title', textoAtualizado);
                    $(postit).find('.fechar').toggle(); 
                    $(postit).find('.edit').toggle(); 
                    $(postit).find('.view').toggle(); 
                    $(postit).find('.responsavel').toggle(); 
                }
            });

            // Sai do modo de edição do postit ao pressionar a tecla ESC
            $('.postit').on("keyup", ".edit", function(e){                                 
                if (e.keyCode == 27)
                {                       
                    var postit = $(this).parent().parent();        
                    $(postit).find('.fechar').toggle(); 
                    $(postit).find('.edit').toggle(); 
                    $(postit).find('.view').toggle(); 
                    $(postit).find('.responsavel').toggle(); 
                }
            });

            // Permite clicar dentro do postit sem sair do modo de edição
            $('#board').on("click", ".postit", function(e){                                     

                //if(e.which == 3){                    
                    //$('.dropdown').dropdown();
                //}else{
                    e.stopPropagation();
                    e.bubbles = false;
                //}
            });

            // Entra no modo de edição ao executar duplo clique no postit
            $('#board').on("dblclick", ".postit", function () {
                $(this).find('.fechar').toggle(); 
                $(this).find('.edit').toggle(); 
                $(this).find('.view').toggle(); 
                $(this).find('.responsavel').toggle(); 
                $(this).find('.edit').focus();
                $('.tooltip').remove();
            });

            // Exclui o postit ao clicar no X
            $('#board').on("click", ".postit .fechar", function(e){ 
                
                if(!confirm('Are you sure to delete this task?')){
                    return;
                }

                e.stopPropagation();
                e.bubbles = false;
                
                var postit = $(this).parent();

                var req = $.ajax({
                    url: '@Url.Action("DeleteTask")?taskId=' + $(postit).attr('data-idTarefa'),
                    type: 'DELETE',
                    dataType: 'json',
                    cache: false,
                    contentType: "application/json;charset=utf-8"
                });

                req.done(function (tarefa) {
                    //chamada do método de sincronização do SIGNALR
                    tarefasHub.server.excluir(tarefa, quadro);       
                    ExcluirTarefa(tarefa);
                });                

                req.fail(function (jqXHR, textStatus, errorThrown) {
                    var resultado = $.parseJSON(jqXHR.responseText);
                    alert('Não foi possível excluir a tarefa, ocorreu um erro: ' + resultado["ExceptionMessage"]);
                });
            });
            
            
           // Adiciona um novo postit na tela
            $('#newTask').click(function () {
                //var task = prompt('Digite a descrição da tarefa:');
                var task = $('#novaTarefaDescricao').val();
                var tipo = $('#novaTarefaCor').val();

                if (task.length > 255) {
                    $('#erroNovaTarefa').text('Description too long. Maximum allowed size is 255.');
                    $('#erroNovaTarefa').show();
                    return;
                }

                if (task != '' && task != null) {


                    Loading();

                    var req = $.ajax({
                        url: '@Url.Action("AddTask")',
                        type: 'POST',
                        dataType: 'json',
                        cache: false,
                        contentType: "application/json;charset=utf-8",
                        data: JSON.stringify({ Descricao: task, Tipo: tipo })
                    });

                    req.done(function (tarefa) {
                        AdicionarTarefa(tarefa, true);     
                        //chamada do método de sincronização do SIGNALR
                        tarefasHub.server.adicionar(tarefa, quadro);
                        Loading();
                        //                        $.fancybox.close();

                        $('#erroNovaTarefa').text('');
                        $('#erroNovaTarefa').hide('');
                        $('#novaTarefaDescricao').val('');
                        $('#novaTarefaCor').val('1');

                        if($('#keepNewTaskOpened').is(':checked')){
                            $('#novaTarefaDescricao').focus();
                        }else{
                            $('#novaTarefa').modal('hide');   
                        }                        
                    });

                    req.fail(function (jqXHR, textStatus, errorThrown) {                        
                        var resultado = $.parseJSON(jqXHR.responseText);
                        alert('Não foi possível cadastrar a tarefa, ocorreu um erro: ' + resultado["ExceptionMessage"]);                        
                        Loading();
                    });


                }else{
                    $('#erroNovaTarefa').text('A descrição não foi preenchida.');
                    $('#erroNovaTarefa').show();
                }
            });

            $('#tools').dblclick(function () {
                $(this).hide('slow');
            });

            $('#board').dblclick(function () {
                $('#tools').toggle('slow');
            });

        };


        function AdicionarTarefa(tarefa, acertarTela){

            $('#status_' + tarefa.Status).append(MontarTarefa(tarefa));         

            if(acertarTela){
                AtivarDrag();
                AtualizarContagem();
                AtualizarAltura();
            }
            AtivarTooltip();
        }

        function Editar(tarefa){
            //alert(tarefa.Descricao);
            //alert(tarefa.Descricao);
            $('[data-idTarefa='+tarefa.Id+']').find('.view span').text(tarefa.Descricao);
            $('[data-idTarefa='+tarefa.Id+']').find('.edit').val(tarefa.Descricao);
            $('[data-idTarefa=' + tarefa.Id + ']').find('.view span').attr('title', tarefa.Descricao);            
            AtivarTooltip();
        }

        function ExcluirTarefa(tarefa){
            $('.postit[data-idTarefa='+ tarefa.Id +']').remove();
            AtualizarContagem();
            AtualizarAltura();
        }

        function MoverTarefa(tarefa){
            ExcluirTarefa(tarefa);
            AdicionarTarefa(tarefa, true);
        }

        //-------------------------------------------------------------------
        // Move um post-it de um status para outro
        //-------------------------------------------------------------------
        function Mover(coluna, postit) {            

            var status = $(coluna).attr('data-status');  
            var statusAtual = $(postit).attr('data-status');

            if(statusAtual == status)
                return;

            var idTarefa = $(postit).attr('data-idTarefa');

            $(postit).hide();

            $(postit).css('top', '0');
            $(postit).css('left', '0');

            var tarefa = { Id: idTarefa, Status: status }; 

            Loading();

            var req = $.ajax({
                url: '@Url.Action("UpdateTask")',
                type: 'PUT',
                dataType: 'json',
                cache: false,
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(tarefa)
            });

            req.done(function (json) {
                
                $(postit).attr('data-status', status);                

                //chamada do método de sincronização do SIGNALR
                tarefasHub.server.mover(json, quadro);     
               
                MoverTarefa(json);

                Loading();
            });            

            req.fail(function (jqXHR, textStatus, errorThrown) {
                $(postit).show();
                AtualizarContagem();
                Loading();
                var resultado = $.parseJSON(jqXHR.responseText);
                alert(resultado["ExceptionMessage"]);
            });
        }

        function AtualizarAltura() {
            
            var altura = $('#board').outerHeight();

            $('.status').each(function(){    
                $(this).height(altura);
            });
        }

        // início do SIGNALR
        Loading();
        $.connection.hub.start(function(){            
            Iniciar();    
        });

        
        
    });

</script>      
}